
import React, { memo } from 'react'
import { Left2Warpper } from './style'

import CustomContainerHeader from '@/components/custom-container-header/index'
import CustomChartProgress from '@/components/custom-chart-progress/index'
import CustomChartBaseBar from '@/components/custom-chart-basebar/index'
const Left2 = memo((props) => {
    const data = [
        { label: '01', value: 12 },
        { label: '02', value: 45 },
        { label: '03', value: 35 },
        { label: '04', value: 20 },
        { label: '05', value: 51 },
        { label: '06', value: 25 },
        { label: '07', value: 14 },
        { label: '08', value: 19 },
        { label: '09', value: 24 },
        { label: '10', value: 8 },
        { label: '11', value: 20 },
        { label: '12', value: 25 },
        { label: '13', value: 50 },
        { label: '14', value: 1 },
        { label: '15', value: 60 },
        { label: '16', value: 0 },
        { label: '17', value: 15 },
        { label: '18', value: 2 },
        { label: '19', value: 5 },
        { label: '20', value: 12 },
    ]
    return (
        <Left2Warpper>
            <CustomContainerHeader defaultSlot={'考勤信息'} clickRightHandle={e => { console.log('点击了详情页') }} />
            <div className="top-chart">
                <div className="left-container">
                    <div className="chart">
                        <CustomChartProgress height="132px" percent={67} params={{ startColor: '#FCE1C3', endColor: "#F07345" }} />
                    </div>
                    <div className="tip">
                        <p className='label'>关键岗位考勤率</p>
                        <p className='value'>{'67%'}</p>
                    </div>
                </div>
                <div className="line"></div>
                <div className="right-container">
                    <div className="chart">
                        <CustomChartProgress percent={96} height="132px" params={{ startColor: '#AEB4CE', endColor: "#516EEA" }} />
                    </div>
                    <div className="tip">
                        <p className='label'>特殊工种考勤率</p>
                        <p className='value'>{'96%'}</p>
                    </div>
                </div>
            </div>
            <div className="bottom-chart">
                <CustomChartBaseBar data={data} height="100%"></CustomChartBaseBar>
            </div>
        </Left2Warpper>
    )
})


export default Left2